<template>
	<view class="content">
		<view class="tabber-wrapper">
			<view class="backNav">
				<view class="left" @click="goBack()">
					<image src="../../static/img/left.png" mode=""></image>
				</view>
				<view class="center">交易记录</view>
				<view class="right"></view>
			</view>
		</view>
		<view id="nav_content">
			<view class="nav_top">
				<view @click="gochongzhi()">充值</view>
				<view class="on">提款</view>
			</view>
			<view id="nav_content_list">
				<view class="nav_content_list title">
					<view class="view4">提款地址</view>
					<view class="view1">金额</view>
					<view class="view2">状态</view>
					<view class="view3">时间</view>
				</view>
				<view class="nav_content_list" v-for="item in datas">
					<view class="view4">{{item.bank_name}}</view>
					<view class="view1">{{item.money}}</view>
					<view :class="['view2',{'tongguo':item.status == 2},{'weitongguo':item.status == 3}]">{{status_fun(item.status)}}</view>
					<view class="view3">{{item.created_at}}</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import { recharge_record,drawing_record } from '../../api/api.js'
	export default{
		data(){
			return{
				isrefresh: false,
				page:1,
				datas:[]
			}
		},
		onShow() {
			
		},
		onLoad() {
			this.page=1
			this.initData()
		},
		// 上拉加载更多
		onReachBottom() {  
			console.log('触发我了吗---')
		  this.page++; // 增加页码  
		  this.initData(); // 获取数据  
		},
		methods:{
			gochongzhi(){
				uni.navigateTo({
					url:'/pages/transRecord/chongzhi'
				})
			},
			gotixian(){
				uni.navigateTo({
					url:'/pages/transRecord/tixian'
				})
			},
			status_fun(type){
				if(type == 2){
					return '成功';
				}
				else if(type == 3){
					return '失败'
				}
				else{
					return '待处理'
				}
			},
			goBack(){
				uni.navigateTo({
					url:'/pages/user/index'
				})
			},
			initData(){
				drawing_record({page:this.page}).then(res => {
					if(res.data.status.errorCode == 0){
						this.datas=[...this.datas,...res.data.data.data.data]
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	*{
		box-sizing: border-box;
		color: #fff;
	}
	.content{
		width: 100%;
		min-height: 100vh;
		background: #212125;

	}
	.tabber-wrapper{
		background: #202125;
		display: flex;
		flex-direction: column;
	}
	.backNav{
		height: 92rpx;
		background: #202125;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	.left{
		width: 92rpx;
		line-height: 92rpx;
		height: 100%;
		padding-left: 32rpx;
	}
	.left image{
		width: 22rpx;
		height: 22rpx;
	}
	.center{
		flex: 1;
		text-align: center;
		color: #fff;
		font-weight: 900;
		font-size: 30rpx;
	}
	.right{
		width: 92rpx;
		line-height: 92rpx;
		height: 100%;
	}
	#nav_content{
		padding-top: 92rpx;
		background-color: #22252a;
	}
	.nav_top{
		position: fixed;
		top: 92rpx;
		left: 0;
		width: 100%;
		line-height: 80rpx;
		display: flex;
		font-size: 24rpx;
		background-color: #22252a;
	}
	.nav_top view{
		width: 50%;
		text-align: center;
		color: #97a6b4;
	}
	.nav_top .on{
		color: #fff;
		background: url() repeat-x bottom;
		border-bottom: 5rpx solid #36ba73;
	}
	#nav_content_list{
		font-size: 24rpx;
		padding-top: 120rpx;
	}
	.nav_content_list{
		display: flex;
		text-align: center;
		min-height: 60rpx;
	}
	#nav_content_list .title{
		font-weight: bold;
	}
	.nav_content_list view{
		
	}
	.nav_content_list .view1{
		width: 20%;
	}
	.nav_content_list .view2{
		width: 15%;
	}
	.nav_content_list .view3{
		width: 35%;
	}
	.nav_content_list .view4{
		width: 30%;
	}
	.tongguo{
		color: #36ba73;
	}
	.weitongguo{
		color: red;
	}
</style>